<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <el-row>
      <!-- 按钮区 -->
      <el-col :span="24">
        <div class="button-wrapper">
          <el-button size="mini" type="primary" round @click="dialogFormVisible=true">两列表单弹窗</el-button>
          <el-button size="mini" type="warning" round  @click="dialogTableVisible = true">表格弹窗</el-button>
          <el-button size="mini" type="success" round  @click="dialogForm = true">单列表单弹窗</el-button>
          <el-button size="mini" type="danger" round  @click="dialogVisible = true">普通文本弹窗</el-button>

          <el-button :plain="true" @click="open2">成功</el-button>
          <el-button :plain="true" @click="open3">警告</el-button>
          <el-button :plain="true" @click="open">消息</el-button>
          <el-button :plain="true" @click="open4">错误</el-button>
          <el-button :plain="true" @click="toTabPage">事件处置tab</el-button>
          <el-button :plain="true" @click="toTabPage1">任务处置tab</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :span="24">
        <div class="data-wrapper">
          <template v-if="tableData3!=null">
          <el-table ref="multipleTable" :data="tableData3"  tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
            <el-table-column type="selection" label="全选" width="40">
            </el-table-column>
            <el-table-column type="index" label="序号" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="name" label="事件类型" sortable>
            </el-table-column>
            <el-table-column prop="username" label="上报人"> 
            </el-table-column>
            <el-table-column prop="website" label="所属河道" sortable>
            </el-table-column>
            <el-table-column prop="email" label="河长" sortable>
            </el-table-column>
            <el-table-column prop="phone" label="事件来源">
            </el-table-column>
            <el-table-column prop="address.suite" label="当前状态">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button title="告警阈值" size="small" icon="el-icon-bell" type="warning" circle></el-button>
              <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle @click="handleView(scope.$index, scope.row)"></el-button>
              <el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
              <el-button title="删除" size="small" icon="el-icon-delete" type="danger" circle @click="handleDel(scope.$index, scope.row)"></el-button>
            </template>
           </el-table-column> 
          </el-table>
          </template>
        </div>
      </el-col>
    </el-row>

    <!-- 弹出窗口区域 -->
    <el-dialog title="用户添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="河段名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="河段长度" :label-width="formLabelWidth">
              <el-input v-model="form.length" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="河段开始地址" :label-width="formLabelWidth">
              <el-input v-model="form.beginAddr" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="河段结束地址" :label-width="formLabelWidth">
              <el-input v-model="form.endAddr" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属省份" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择省份">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属地市" :label-width="formLabelWidth">
              <el-select v-model="form.city" placeholder="请选择地市">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>      
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属区县" :label-width="formLabelWidth">
              <el-select v-model="form.county" placeholder="请选择区县">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属乡镇/街道" :label-width="formLabelWidth">
              <el-select v-model="form.street" placeholder="请选择乡镇/街道">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>      
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属村/社区" :label-width="formLabelWidth">
              <el-select v-model="form.village" placeholder="请选择村/社区">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效巡河点数" :label-width="formLabelWidth">
              <el-input v-model="form.points" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>      
        </el-row>
        <el-row :gutter="5">
          <el-col :span="24">
             <el-button size="medium" type="primary" icon="el-icon-location">开始河段描点</el-button>
             <div class="form-map">
               地图位置预留区
             </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogTableVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </div>
    </el-dialog>  

    <el-dialog title="友情链接管理" :visible.sync="dialogForm" width="40%">
      <el-form :model="form1">
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="友情链接名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>       
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="友情链接地址" :label-width="formLabelWidth">
              <el-input v-model="form.addr" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>       
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="友情链接位置" :label-width="formLabelWidth">
              <el-input v-model="form.map" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>       
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form.note" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>       
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogForm = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogForm = false">确 定</el-button>
      </div>
    </el-dialog> 

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog> 
    <!--查看  -->
    <el-dialog title="查看" :visible.sync="dialogFormVisible2">
      <el-form v-if="oneCol">
        <el-row :gutter="10">
          <el-col :span="12">
           用户id： {{oneCol.id}}
          </el-col>
          <el-col :span="12">
           事件类型： {{oneCol.name}} 
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            上报人：{{oneCol.username}}
          </el-col>
          <el-col :span="12">
            所属河道：{{oneCol.website}}  
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
    </el-dialog> 
    <!--编辑  -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
      <el-form :model="oneCol" v-if="oneCol">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="序号" :label-width="formLabelWidth">
              <el-input v-model="oneCol.id" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事件类型" :label-width="formLabelWidth">
              <el-input v-model="oneCol.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="上报人" :label-width="formLabelWidth">
              <el-input v-model="oneCol.username" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属河道" :label-width="formLabelWidth">
              <el-input v-model="oneCol.website" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="河长" :label-width="formLabelWidth">
              <el-input v-model="oneCol.email" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事件来源" :label-width="formLabelWidth">
              <el-select v-model="oneCol.address" placeholder="请选择">
                <el-option :label="oneCol.address.city" :value="oneCol.address.city"></el-option>
                <el-option :label="oneCol.address.suite" :value="oneCol.address.suite"></el-option>
                <el-option :label="oneCol.address.street" :value="oneCol.address.street"></el-option>
                <el-option :label="oneCol.address.zipcode" :value="oneCol.address.zipcode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>      
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
      </div>
    </el-dialog>  
  </div>
</template>
<script>

export default {
  data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible:false,
        dialogForm:false,
        dialogVisible: false,
        dialogFormVisible1:false,
        dialogFormVisible2:false,
        loading:false,
        form: {
          name: '',
          length:'',
          beginAddr:'',
          endAddr:'',
          region: '',
          city: '',
          county: '',
          street:'',
          village:'',
          points:'',
        },
        form1: {
          name: '',
          addr:'',
          map:'',
          note:''
        },
        formLabelWidth: '100px',
        tableData3:null,
        //声明的一个单行表格数据
        oneCol:{
          address:{  
          },
        },
      }
    },
  created() {
    this.getList('/users')
  },
  methods:{
    getList(url) {
      this.loading=true
      this.getRequest(url).then((res)=>{
      this.tableData3=res.data
      this.loading=false
    })
    .catch((error)=>{
        //错误信息
        console.log(error)
      })
    },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleSelectionChange(){},
      indexMethod(){},
      //查看,编辑，删除操作
      handleView(index, row){
        this.oneCol=row;
        this.oneCol.address=row.address;
        console.log(this.oneCol);
        this.dialogFormVisible2=true;
      },
      handleEdit(index, row){
        this.dialogFormVisible1=true;
        this.oneCol=row;
        this.oneCol.address=row.address;
      },
      handleDel(index, row){
        console.log(index, row);
        this.dialogVisible = true
      },
      //提示信息
      open() {
        this.$message('这是一条提示消息');
      },
      open2() {
        this.$message.success('恭喜你，这是一条成功消息');
      },

      open3() {
        this.$message.warning('警告哦，这是一条警告消息');
      },

      open4() {
        this.$message.error('错了哦，这是一条错误消息');
      },
      //跳转到tab页
      toTabPage(){
        this.$router.push('/affair/event/dealtab')
      },
      //跳转到tab页
      toTabPage1(){
        this.$router.push('/affair/event/dealtab1')
      },
  },
}
</script>
<style scoped>

</style>
